﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Simple Array Grid - Ext.NET Examples</title>
    <link href="/resources/css/examples.css" rel="stylesheet" />    

    <script>
        var template = '<span style="color:{0};">{1}</span>';

        var change = function (value) {
            return Ext.String.format(template, (value > 0) ? "green" : "red", value);
        };

        var pctChange = function (value) {
            return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
        };
    </script>
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
    
        <h1>Change GridPanel Column and Selection Models during a DirectEvent</h1>
    
        <p>Demonstrates removing a GridPanels ColumnModel and SelectionModel during a DirectEvent, then reconfiguring with new Models and Store Data.</p>
    
        <p>Ensure to call .Render() on the GridPanel when finished reconfiguring the Components.</p>
    
        <ext:Window 
            ID="Window1" 
            runat="server"
            Title="Example"
            Closable="false"
            Layout="FitLayout"
            Height="350"
            Width="620">
            <TopBar>
                <ext:Toolbar ID="Toolbar1" runat="server">
                    <Items>
                        <ext:Button ID="Button1"
                            runat="server" 
                            Text="Reconfigure" 
                            Icon="Accept">
                            <DirectEvents>
                                <Click OnEvent="Button1_Click">
                                    <EventMask 
                                        ShowMask="true" 
                                        Target="CustomTarget" 
                                        CustomTarget="Window1" 
                                        />
                                </Click>
                            </DirectEvents>    
                        </ext:Button>
                    </Items>
                </ext:Toolbar>
            </TopBar>
            <Items>
                <ext:GridPanel 
                    ID="GridPanel1"
                    runat="server" 
                    Border="false">
                    <Store>
                        <ext:Store ID="Store1" runat="server">
                            <Model>
                                <ext:Model ID="Model1" runat="server">
                                    <Fields>
                                        <ext:ModelField Name="company" />
                                        <ext:ModelField Name="price" Type="Float" />
                                        <ext:ModelField Name="change" Type="Float" />
                                        <ext:ModelField Name="pctChange" Type="Float" />
                                        <ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <ColumnModel ID="ColumnModel1" runat="server">
                        <Columns>
                            <ext:Column ID="Column1" runat="server" Text="Company" DataIndex="company" Flex="1" />
                            <ext:Column ID="Column2" runat="server" Text="Price" DataIndex="price">
                                <Renderer Format="UsMoney" />
                            </ext:Column>
                            <ext:Column ID="Column3" runat="server" Text="Change" DataIndex="change">
                                <Renderer Fn="change" />
                            </ext:Column>
                            <ext:Column ID="Column4" runat="server" Text="Change" DataIndex="pctChange">
                                <Renderer Fn="pctChange" />
                            </ext:Column>
                            <ext:DateColumn ID="DateColumn1" runat="server" Text="Last Updated" DataIndex="lastChange" />
                        </Columns>
                    </ColumnModel>
                    <View>
                        <ext:GridView ID="GridView1" runat="server" StripeRows="true" TrackOver="true" />
                    </View>
                </ext:GridPanel> 
            </Items>
        </ext:Window>
    </form>
</body>
</html>